<template>
  <div class="website-type-list-box">
    <div class="left">
      <ul>
        <li
          v-for="(item, index) in websiteTypeList"
          :key="index"
          :class="[{ active: topCurrentCategoryId === item.categoryId }]"
          @click="handleSelect(item)"
        >
          <svg-icon
            v-if="!item.categoryIcon"
            icon-name="icon-danlieliebiao"
            :color="topCurrentCategoryId === item.categoryId ? '#009a74' : '#000'"
            size="18px"
            class-name="catalog-icon"
          ></svg-icon>
          <svg-icon
            v-else
            :icon-name="item.categoryIcon"
            :color="topCurrentCategoryId === item.categoryId ? '#009a74' : '#000'"
            size="18px"
            class-name="catalog-icon"
          ></svg-icon>
          <span>{{ item.categoryName }}</span>
        </li>
      </ul>
    </div>

  </div>
</template>
<script lang="ts" setup>
  const emit = defineEmits(['getWebsiteCategoryListByType', 'getWebsiteListByType']);

  const props = defineProps<{
    defaultTopCategoryId: string,
    websiteTypeList: Array<{
      categoryIcon: string;
      categoryName: string;
      categoryId: string;
    }>;
  }>();

  // 点击类型
  const { topCategoryId } = useRoute().query;
  const topCurrentCategoryId = ref<string>('');
  if (topCategoryId) {
    topCurrentCategoryId.value = topCategoryId as string;
  } else {
     topCurrentCategoryId.value = props.defaultTopCategoryId;
  }
  // 点击类型
  const router = useRouter();
  const handleSelect = (item: any) => {
    topCurrentCategoryId.value = item.categoryId;
    const params = {
      topCategoryId: topCurrentCategoryId.value,
      queryText: ''
    };
    emit('getWebsiteListByType', params);
    emit('getWebsiteCategoryListByType', topCurrentCategoryId.value);
    router.replace({
      path: '/website',
      query: {
        topCategoryId: topCurrentCategoryId.value
      }
    });
  };

  // 根据类型查询网站分类
  emit('getWebsiteCategoryListByType', topCurrentCategoryId.value);
  const params = {
    topCategoryId: topCurrentCategoryId.value,
    queryText: ''
  };
  // 根据网站类型查询网站列表
  emit('getWebsiteListByType', params);
</script>
<style lang="scss" scoped>
  .website-type-list-box {
    width: 100%;
    display: flex;
    min-height: 42px;
    justify-content: space-between;
    .left {
      width: 100%;
      ul {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        li {
          list-style: none;
          width: 85%;
          height: 42px;
          border-radius: 20px;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          letter-spacing: 4px;
          transition: all 0.3s;
          border: 1px solid transparent;
          user-select: none;
          margin-bottom: 10px;
          &:hover {
            color: #009a74;
            border: 1px solid #03d7a2;
          }
          .catalog-icon {
            margin-right: 10px;
          }
          span {
            min-width: 72px;
          }
        }
        .active {
          color: #009a74;
          border: 1px solid #2ddd9d;
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      padding: 0 5px 0 0;
      .sort-box {
        margin-left: 10px;
        display: flex;
        align-items: center;
        color: rgb(181, 181, 181);
        cursor: pointer;
        transition: all 0.3s;
        font-size: 14px;
        user-select: none;
        span {
          margin-left: 2px;
        }
      }
      .active {
        color: #018060;
      }
    }
  }
</style>
